'use client';

import { Suspense } from 'react';
import VideoPlayer from '@/components/VideoPlayer';
import CategoryCard from '@/components/CategoryCard';
import { DefaultThumbnail, LiveIcon, ViewersIcon, UserIcon } from '@/components/icons';

// 测试直播数据
const featuredStream = {
    id: '1',
    title: '测试直播间',
    streamer: '测试主播',
    viewers: '1.2K',
    streamUrl: 'https://19920625.xyz/live/31f5ae0e4bf9.m3u8',
};

const liveChannels = [
    {
        id: '1',
        title: '测试直播间 1',
        streamer: '测试主播 1',
        viewers: '1.2K',
        streamUrl: 'https://19920625.xyz/live/31f5ae0e4bf9.m3u8',
    },
    {
        id: '2',
        title: '测试直播间 2',
        streamer: '测试主播 2',
        viewers: '3.4K',
        streamUrl: 'https://19920625.xyz/live/31f5ae0e4bf9.m3u8',
    },
];

const categories = [
    { id: 1, title: '游戏', viewers: '120K' },
    { id: 2, title: '娱乐', viewers: '80K' },
    { id: 3, title: '音乐', viewers: '50K' },
    { id: 4, title: '电竞', viewers: '200K' },
    { id: 5, title: '生活', viewers: '30K' },
    { id: 6, title: '创作', viewers: '20K' },
];

export default function Home() {
    const handleError = error => {
        console.error('播放器错误:', error);
    };

    const handleCategoryClick = category => {
        console.log('点击分类:', category);
        // TODO: 实现分类跳转
    };

    return (
        <div className="min-h-screen bg-gray-900">
            <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
                {/* Featured Stream */}
                <section className="mb-12">
                    <h2 className="text-2xl font-bold text-white mb-6">推荐直播</h2>
                    <div className="relative">
                        {/* 状态标签 - 始终显示 */}
                        <div className="absolute top-0 left-0 right-0 z-20 p-3 flex items-center justify-between">
                            <div className="flex items-center space-x-2">
                                <span className="bg-red-500 text-white text-xs px-2 py-1 rounded-md flex items-center space-x-1">
                                    <LiveIcon className="w-3 h-3" />
                                    <span>直播中</span>
                                </span>
                                <span className="bg-black/50 text-white text-xs px-2 py-1 rounded-md flex items-center space-x-1">
                                    <ViewersIcon className="w-3 h-3" />
                                    <span>{featuredStream.viewers}</span>
                                </span>
                            </div>
                        </div>

                        <Suspense
                            fallback={
                                <div className="aspect-video bg-gray-800 rounded-lg animate-pulse" />
                            }
                        >
                            <VideoPlayer
                                url={featuredStream.streamUrl}
                                title={featuredStream.title}
                                isLive={true}
                                onError={handleError}
                                className="rounded-lg overflow-hidden"
                            />
                        </Suspense>

                        {/* 渐变遮罩 */}
                        <div className="absolute inset-0 z-10 bg-gradient-to-t from-black/60 via-transparent to-black/30 opacity-40 transition-opacity pointer-events-none" />
                    </div>
                </section>

                {/* Live Channels */}
                <section className="mb-12">
                    <h2 className="text-2xl font-bold text-white mb-6">热门直播</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        {liveChannels.map(channel => (
                            <div
                                key={channel.id}
                                className="group bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-indigo-500 transition-all"
                            >
                                <div className="relative aspect-video">
                                    {/* 状态标签 - 始终显示 */}
                                    <div className="absolute top-0 left-0 right-0 z-20 p-3 flex items-center justify-between">
                                        <div className="flex items-center space-x-2">
                                            <span className="bg-red-500 text-white text-xs px-2 py-1 rounded-md flex items-center space-x-1">
                                                <LiveIcon className="w-3 h-3" />
                                                <span>直播中</span>
                                            </span>
                                            <span className="bg-black/50 text-white text-xs px-2 py-1 rounded-md flex items-center space-x-1">
                                                <ViewersIcon className="w-3 h-3" />
                                                <span>{channel.viewers}</span>
                                            </span>
                                        </div>
                                    </div>

                                    {/* 视频播放器 */}
                                    <Suspense
                                        fallback={
                                            <div className="w-full h-full bg-gray-700 animate-pulse" />
                                        }
                                    >
                                        <div className="w-full h-full">
                                            <VideoPlayer
                                                url={channel.streamUrl}
                                                title={channel.title}
                                                isLive={true}
                                                onError={handleError}
                                            />
                                        </div>
                                    </Suspense>

                                    {/* 渐变遮罩 - 始终显示但透明度变化 */}
                                    <div className="absolute inset-0 z-10 bg-gradient-to-t from-black/60 via-transparent to-black/30 opacity-40 group-hover:opacity-60 transition-opacity pointer-events-none" />
                                </div>

                                {/* 主播信息 */}
                                <div className="p-3">
                                    <div className="flex items-center space-x-3">
                                        <div className="flex-shrink-0">
                                            <div className="w-8 h-8 rounded-full bg-gray-700">
                                                <UserIcon className="w-8 h-8 text-gray-500" />
                                            </div>
                                        </div>
                                        <div className="min-w-0">
                                            <p className="text-white font-medium truncate">
                                                {channel.streamer}
                                            </p>
                                            <p className="text-gray-400 text-sm truncate">
                                                {channel.title}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </section>

                {/* Popular Categories */}
                <section className="mb-12">
                    <h2 className="text-2xl font-bold text-white mb-6">热门分类</h2>
                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                        {categories.map(category => (
                            <CategoryCard
                                key={category.id}
                                title={category.title}
                                viewers={category.viewers}
                                onClick={() => handleCategoryClick(category)}
                            />
                        ))}
                    </div>
                </section>

                {/* Recommended Channels */}
                <section>
                    <h2 className="text-2xl font-bold text-white mb-6">推荐频道</h2>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                        {[1, 2, 3, 4].map(item => (
                            <div
                                key={item}
                                className="bg-gray-800 rounded-lg p-4 flex items-center justify-between hover:ring-2 hover:ring-indigo-500 transition-all"
                            >
                                <div className="flex items-center space-x-3">
                                    <div className="flex-shrink-0">
                                        <div className="w-10 h-10 rounded-full bg-gray-700">
                                            <UserIcon className="w-10 h-10 text-gray-500" />
                                        </div>
                                    </div>
                                    <div>
                                        <h3 className="text-white font-medium">推荐主播 {item}</h3>
                                        <p className="text-gray-400 text-sm">12.3K 粉丝</p>
                                    </div>
                                </div>
                                <button className="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition-colors">
                                    关注
                                </button>
                            </div>
                        ))}
                    </div>
                </section>
            </main>
        </div>
    );
}
